<template>
	<div class="give-cash-bonus">
		<HeaderTop :title="`下级代存`" :hasright="chosingTitle === 3?true:false" :routeFuc="searchFn" :rightText="`查询`"></HeaderTop>
        <div class="lowerLevel-content-title-left flex-c">
            <div class="lowerLevel-content-title-list flex-c" :class="chosingTitle === 1?'title-chosing':''" @click="switchTitle(1)">会员代存</div>
            <div class="lowerLevel-content-title-list flex-c" v-if="!!agentData.teamAgentId === true && agentData.teamLeader === true ||  agentData.agentLevel == '1'" :class="chosingTitle === 2?'title-chosing':''" @click="switchTitle(2)">代理代存</div>
            <div class="lowerLevel-content-title-list flex-c" :class="chosingTitle === 3?'title-chosing':''" @click="switchTitle(3)">代存记录</div>
        </div>
        <div class="gray-line"></div>
        <div class="give-cash-content" v-if="chosingTitle===1 || chosingTitle===2">
            <div class="balance-box flex-b">
                <div class="balance-list">额度钱包：<span class="bold">{{ agentData.quotaCash }}</span></div>
                <div class="balance-list">佣金钱包：<span class="bold">{{ agentData.rebateCash }}</span></div>
            </div>
            <div class="give-cash-line flex-b">
                <div class="line-left-fonts flex-s">代存类型:</div>
                <div class="line-right-input flex-b" @click="showCashMode = true">
                    <span>{{ cashModeChosed }}</span>
                    <van-icon class="arrow-down" name="arrow-down" color="#999999"/>
                </div>
            </div>
            <div class="give-cash-line flex-b">
                <div class="line-left-fonts flex-s" v-if="chosingTitle === 1">代存账号:</div>
                <div class="line-left-fonts flex-s" v-if="chosingTitle === 2">代理账号:</div>
                <div class="line-right-input flex-b">
                    <input type="text" maxlength="16" class="check-acc-input" placeholder='请仔细核对账号，提交后无法撤回' v-model="addMemberVal" @blur="checkMember()" onKeyUp="value=value.replace(/[\W]/g,'')">
                    <div class="member-check-error" v-if="!checkResult && chosingTitle === 1">此账号不存在或不属于下级账号，请核对。</div>
                    <div class="member-check-error" v-if="!checkResult && chosingTitle === 2">此账号不存在或不属于下级代理，请核对。</div>
                </div>
            </div>
            <div class="give-cash-line flex-b">
                <div class="line-left-fonts flex-s">上分金额:</div>
                <div class="line-right-input flex-b">
                    <van-field v-model="cashNumber" @input="checkCashInput(cashNumber,cashModeChosed)" type="number" maxlength="10" class="vant-input-list" placeholder="¥0.00"/>
                    <div class="cash-input-error" v-if="cashInputError">可用额度不足</div>
                </div>
            </div>
            <div class="give-cash-line flex-b">
                <div class="line-left-fonts flex-s">验证方式:</div>
                <div class="right-radio flex-s">
                    <mt-radio v-model="checkType" :options="checkTypeOptions"></mt-radio>
                </div>
            </div>
            <div class="give-cash-line vcode-line flex-b">
                <div class="line-left-fonts flex-s">验证码:</div>
                <div class="line-right-input flex-b">
                    <van-field v-model="vCodeVal" type="digit" maxlength="10" class="vant-input-list" placeholder="输入验证码"/>
                    <div class="check-acc-btn flex-c" v-if="checkType === '1'" @click="sendSmsFn()">{{sendText}}{{isSending === true?'s':''}}</div>
                </div>
            </div>
            <van-button class="sub-give-cash" type="info" color="#00459E" block @click="check">提交</van-button>
        </div>
        <div class="give-cash-content" v-if="chosingTitle===3">
            <div class="data-list-box">
                <div class="collapse-content-list" v-for="(item,index) in listData" @click="switchTitleShow(index)">
                    <div class="collapse-content-list-title">
                        <div class="collapse-content-list-title-left">{{ item.addTimeShow }}</div>
                        <!-- <div class="collapse-content-list-title-left">{{  }}</div> -->
                        <div class="">
                            <img src="/static/images/allReports-arrow.png" v-if="showDataSwitch[index]===0" alt=""
                                    class="collapse-content-list-title-right">
                            <img src="/static/images/allReports-arrow.png" v-if="showDataSwitch[index]===1" alt=""
                                    class="collapse-content-list-title-right collapse-content-list-title-right2">
                        </div>
                    </div>
                    <div class="collapse-content-list-table" v-if="showDataSwitch[index]===1">
                        <div class="">
                            <div class="collapse-content-list-table-list">
                                <div class="w50">
                                    <div class="line1">金额</div>
                                    <div class="line2">{{ item.cash }}</div>
                                </div>
                                <div class="gray-line"></div>
                                <div class="w50">
                                    <div class="line1">账号类型</div>
                                    <div class="line2 ellipsis-s">{{ item.actionTypeName }}</div>
                                </div>
                            </div>
                            <div class="collapse-content-list-table-list">
                                <div class="w50">
                                    <div class="line1">接收账号</div>
                                    <div class="line2">{{ !!item.cashOutAccount===true?item.cashOutAccount:'未知' }}</div>
                                </div>
                                <div class="gray-line"></div>
                                <div class="w50">
                                    <div class="line1">代存类型</div>
                                    <div class="line2">{{ item.walletTypeName }}</div>
                                </div>
                                <div class="gray-line"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="no-data-box" v-if="noData">
                    <img src="/static/images/agent-reports-noData.png" alt="" class="no-data-img">
                    <div class="no-data-fonts">暂无数据</div>
                </div>
                <div class="load-more" v-if="hasMore && listData.length > 0" @click="loadMore()">
                    <span>点击加载更多</span>
                    <img src="/static/images/agent-lowerLevel-loadMore.png" alt="" class="load-more-icon">
                </div>
                <div class="load-more" v-if="!hasMore && listData.length > 0">
                    <span>已加载全部</span>
                </div>
            </div>
        </div>
        <van-popup v-model="showCashMode" position="bottom">
            <van-picker title="请选择钱包" show-toolbar :columns="cashModeType" @confirm="onConfirm" @cancel="showCashMode = false"/>
        </van-popup>
        <van-calendar v-model="dateSelect" :min-date="new Date(dateRange.getFullYear(),dateRange.getMonth()-1,1)" :max-date="new Date(dateRange.getFullYear(),dateRange.getMonth(),dateRange.getDate())" type="range" @confirm="onConfirmDate" color="#00459E" title="请选择日期范围"/>
        <van-popup v-model="showSearchPop" position="top">
            <div class="search-title flex-c bold">请选择查询条件</div>
            <div class="give-cash-line flex-b">
                <div class="line-left-fonts flex-s">接受账号:</div>
                <div class="line-right-input flex-b">
                    <input type="text" maxlength="16" class="check-acc-input" placeholder='输入会员账号并点击右侧“确定”提交' v-model="searchName" onKeyUp="value=value.replace(/[\W]/g,'')">
                </div>
            </div>
            <div class="give-cash-line vcode-line flex-b">
                <div class="line-left-fonts flex-s">账号类型:</div>
                <div class="right-checkbox flex-s">
                    <div class="right-checkbox-list flex-c" :class="searchRadioIndex === index?'right-checkbox-list-activing bold':''" v-for="(item,index) in searchRadioData" :key="index" @click="switchSearchRadio(item,index)">{{ item }}</div>
                </div>
            </div>
            <div class="give-cash-line need-bet-line flex-b">
                <div class="line-left-fonts flex-s">时间范围:</div>
                <div class="line-right-input flex-b" @click="dateSelect = true">{{ chosedDate }}</div>
            </div>
            <div class="sub-search-btn-box flex-c">
                <van-button class="sub-search-btn" type="info" color="#00459E" block @click="subSearch()">查询</van-button>
                <van-button class="sub-search-btn" plain color="#00459E" block @click="resetSearch()">重置</van-button>
            </div>

        </van-popup>
    <PayPwdInput :visible="isVisible" @error="isShowError" @close="isVisible = false" @complete="handleComplete"/>

    <!--loading-new-->
        <div class="loading-new flex-c" v-if="showLoading">
            <img src="/static/images/allLoading.gif" alt="" />
        </div>
	</div>
</template>
<script>
import HeaderTop from '../../components/top/top';
import dayjs from 'dayjs'
import {Dialog} from 'vant';
import {checkPayPassword} from "../../common/check";
import PayPwdInput from "../../components/passwordInput/PayPwdInput.vue";
export default {
	name: 'giveCashBonus',
	components: {
    PayPwdInput,
		HeaderTop,
	},
	data() {
		return {
      isShowError: false,
      isVisible: false,
            chosingTitle:1,
            showCashMode:false,
            cashModeType: ['额度钱包', '佣金钱包'],
            cashModeChosed:'',
            addMemberVal:'',
            cashNumber:'',
            cashInputError:false,
            gameModeCode:[99,6,5,4,3,2,1],
            gameTypeVal:null,
            checkType:'',
            checkTypeOptions:[
                {
                    label: '动态验证码',
                    value: '2',
                    disabled:false
                },
                {
                    label: '邮箱验证码',
                    value: '1',
                    disabled: false
                },
            ],
            vCodeVal:'',
            agentData:{},
            showLoading:false,
            listData:[],
            showDataSwitch: [],
            noData:false,
            hasMore:true,
            pageNumber:1,
            showSearchPop:false,
            searchRadioData:['全部','会员','代理'],
            searchRadioIndex:-1,
            searchRadioVal:'',
            dateSelect:false,
            dateRange:new Date(),
            chosedDate:'请选择日期范围',
            searchMember:'',
            searchName:'',
            searchAgent:'',
            beginTime:'',
			endTime:'',
            checkResult:true,
            sendText:'获取',
            isSending:false,
            smsTimer:null,
		}
	},
	mounted() {
    checkPayPassword(this.$router)
		this.loadTop()
	},
	beforeRouteLeave(to, from, next) {
        clearTimeout(this.smsTimer)
        this.smsTimer = null
		this.$destroy(true)
		next()
	},
	methods: {
    handleComplete(code){
      this.isLoading = true
      this.ServerAPI.postAPI(this.API.validatePayPassword, {
        password:code
      }, (success, data) => {
        if(success) {
          if (data.code !== '1') {
            this.isLoading = false
            this.isShowError = true
            this.$toastTop(data.info, 3);
            return
          }
          this.isVisible = false
          this.subDeposit()
        }
      })
    },
		loadTop() {
			this.cashModeChosed = this.cashModeType[0]
			this.gameTypeVal = this.gameModeCode[0]
			this.checkType = this.checkTypeOptions[0].value
            // this.getBonusInfo()
            this.getAgentInfo()
		},
        switchTitle(val){
            if(this.chosingTitle !== val){
                this.chosingTitle = val
                if(val === 3){
                    this.pageNumber = 1
                    this.listData = []
                    this.resetSearch()
                    this.lowLevelList()
                }
            }
        },
        getAgentInfo(){
            this.ServerAPI.postAPI(this.API.getAgentInfo, '', (success,data)=>{
				if(success){
					if(data.code === '0000'){
						this.agentData = data.data
                        this.agentData.quotaCash = this.agentData.quotaCash.toFixed(2)
                        this.checkTypeOptions[1].disabled = !this.agentData.email
					}
				}
			})
        },
        lowLevelList() {
            this.showLoading = true
            let params = {
                memberAccount:this.searchRadioIndex === 1?this.searchName:'',
                agentAccount:this.searchRadioIndex === 2?this.searchName:'',
                actionType:this.searchRadioVal,
                startDate:this.beginTime !== ''?this.beginTime + ' 00:00:00':'',
                endDate:this.endTime !== ''?this.endTime + ' 23:59:59':'',
                pageNumber:this.pageNumber,
                pageSize:10,
            }
            this.ServerAPI.postAPI(this.API.lowLevelList, params, (success,data)=>{
                this.showLoading = false
				if(success){
					if(data.code === '0000'){
                        if(data.data.length === 10){
							this.hasMore = true
							this.noData = false
						}else if(data.data.length < 10){
							this.hasMore = false
							this.noData = false
						}
						this.listData = this.listData.concat(data.data)
                        if(this.listData.length === 0){
							this.noData = true
						}
                        // this.listData = data.data.page.content
                        this.listData.forEach((item, index) => {
                            item.addTimeShow = dayjs(item.addTime).format('YYYY-MM-DD hh:mm:ss')
                            this.showDataSwitch[index] = 1
                            if(item.actionType === 10001) {
                                item.actionTypeName = '会员'
                            }else if(item.actionType === 10005) {
                                item.actionTypeName = '代理'
                            }
                            if(item.walletType === 10) {
                                item.walletTypeName = '佣金钱包'
                            }else if(item.walletType === 11) {
                                item.walletTypeName = '额度钱包'
                            }
                        })
					}
				}
			})
        },
        getBonusInfo() {
            this.ServerAPI.postAPI(this.API.cashBonusInfo, '', (success,data)=>{
				if(success){
					if(data.code === '0000'){

					}
				}
			})
        },
        onConfirm(value, index) {
            this.cashModeChosed = this.cashModeType[index]
            this.showCashMode = false
        },
        checkMember(){
            if(this.isEmpty(this.addMemberVal) === true){
                this.$toastTop('请输入账号',3);
                return false
            }
            this.showLoading = true
            let param = {
                loginName:this.addMemberVal,
                accountType:this.chosingTitle,
            }
            this.ServerAPI.postAPI(this.API.checkDepositMember,param, (success,data)=>{
                this.showLoading = false
				if(success){
					if(data.code === '0000'){
                        this.checkResult = data.data.available
					}else{

                    }
				}else{
                    this.$toastTop('网络慢，请稍后再试', 2);
                }
			})
        },
        checkCashInput(val,type){
            this.cashNumber = this.cashNumber.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')
            let checkVal
            if(type === '额度钱包'){
                checkVal = parseFloat(this.agentData.quotaCash)
            }else if(type === '佣金钱包'){
                checkVal = parseFloat(this.agentData.rebateCash)
            }
            if(parseFloat(this.cashNumber) > checkVal){
                this.cashInputError = true
            }else{
                this.cashInputError = false
            }
        },
        check(){
          if(this.isEmpty(this.addMemberVal) === true){
            this.$toastTop('请输入账号',3);
            return false
          }
          if(this.checkResult === false){
            this.$toastTop('账号不存在，请检查账号',3);
            return false
          }
          if(this.isEmpty(this.cashNumber) === true){
            this.$toastTop('请输入金额',3);
            return false
          }
          if(this.isEmpty(this.vCodeVal) === true){
            this.$toastTop('请输入验证码',3);
            return false
          }
          if(parseFloat(this.cashNumber) < 1){
            this.$toastTop('代存金额不能低于1元',3)
            return false
          }
          if(!checkPayPassword(this.$router)) return
          this.isVisible = true
        },
        subDeposit(){

            let payModeParam
            if(this.cashModeChosed === '额度钱包'){
                payModeParam = 11
            }else if(this.cashModeChosed === '佣金钱包'){
                payModeParam = 10
            }
            if(this.chosingTitle === 1){
                Dialog.alert({
                    message: '你正在向<span style="color:#00459E;font-weight:bold;"> ' + this.addMemberVal + ' </span> 存款 <span style="color:#00459E;font-weight:bold;"> ' + this.cashNumber + ' </span>元\n代存类型 ' + this.cashModeChosed + '。\n<br><span style="color:red;">(请认真核对，一旦提交无法撤回！)</span>',
                    confirmButtonColor:'#00459E',
                    showCancelButton:true,
                }).then(() => {
                    // on close
                    let params = {
                        walletType:payModeParam,
                        cashToMember:this.addMemberVal,
                        cashToMoney:this.cashNumber,
                        validType:this.checkType,
                        validCode:this.vCodeVal,
                    }
                    this.subDepositToMember(params)
                });
            }else if(this.chosingTitle === 2){
                Dialog.alert({
                    message: '你正在向<span style="color:#00459E;font-weight:bold;"> ' + this.addMemberVal + ' </span> 存款 <span style="color:#00459E;font-weight:bold;"> ' + this.cashNumber + ' </span>元\n代存类型 ' + this.cashModeChosed + '。\n<br><span style="color:red;">(请认真核对，一旦提交无法撤回！)</span>',
                    confirmButtonColor:'#00459E',
                    showCancelButton:true,
                }).then(() => {
                    // on close
                    let params = {
                        walletType:payModeParam,
                        cashOutAccount:this.addMemberVal,
                        cashToMoney:this.cashNumber,
                        validType:this.checkType,
                        validCode:this.vCodeVal,
                    }
                    this.subDepositToAgent(params)
                });
            }
        },
        subDepositToMember(paramObj){
            this.showLoading = true
            this.ServerAPI.postAPI(this.API.subDepositToMember, paramObj, (success,data)=>{
                this.showLoading = false
				if(success){
					if(data.code === '1'){
						this.$toastTop(data.info, 1);
                        this.getAgentInfo()
                        this.addMemberVal = ''
                        this.cashNumber = ''
                        this.vCodeVal = ''
					}else{
                        this.$toastTop(data.info, 3);
                    }
				}else{
                    this.$toastTop('网络慢，请稍后再试', 2);
                }
			})
        },
        subDepositToAgent(paramObj){
            this.showLoading = true
            this.ServerAPI.postAPI(this.API.subDepositToAgent, paramObj, (success,data)=>{
                this.showLoading = false
				if(success){
					if(data.code === '1'){
						this.$toastTop(data.info, 1);
                        this.getAgentInfo()
                        this.addMemberVal = ''
                        this.cashNumber = ''
                        this.vCodeVal = ''
					}else{
                        this.$toastTop(data.info, 3);
                    }
				}else{
                    this.$toastTop('网络慢，请稍后再试', 2);
                }
			})
        },
        switchTitleShow(value) {
			this.showDataSwitch[value] = this.showDataSwitch[value] === 1 ? 0 : 1
			this.$forceUpdate()
		},
        searchFn(){
            this.showSearchPop = true
        },
        switchSearchRadio(val,i){
            this.searchRadioIndex = i
            if(val === '会员'){
                this.searchRadioVal = 10001
            }else if(val === '代理'){
                this.searchRadioVal = 10005
            }else if(val === '全部'){
                this.searchRadioVal = ''
            }
        },
        formatDate(date) {
			return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
		},
		onConfirmDate(date) {
			const [start, end] = date;
			this.chosedDate = `${this.formatDate(start)} 至 ${this.formatDate(end)}`;
			this.beginTime = `${this.formatDate(start)}`
			this.endTime = `${this.formatDate(end)}`
			this.dateSelect = false
		},
        subSearch() {
            this.showSearchPop = false
            this.listData = []
            this.lowLevelList()
        },
        resetSearch() {
            this.searchName = ''
            this.searchMember = ''
            this.searchAgent = ''
            this.searchRadioVal = ''
            this.searchRadioIndex = -1
            this.beginTime = ''
            this.endTime = ''
            this.chosedDate = '请选择日期范围'
        },
        loadMore(){
			this.pageNumber++
			this.lowLevelList()
		},
        sendSmsFn(){
            if(this.isSending === true){
                return false
            }
            this.showLoading = true
            this.isSending = true
            this.countFn()
            let params = {
                validType: 1
            }
            this.ServerAPI.postAPI(this.API.memberSendsms, params, (success,data)=>{
                this.showLoading = false
				if(success){
					if(data.code === '0000'){
                        this.$toastTop('发送成功', 1);
					}else{
                        this.$toastTop(data.info, 3);
					}
				}else{
                    this.$toastTop('网络慢，请稍后再试', 2);
				}
			})
        },
        countFn(){
            const TIME_COUNT = 60
            if (!this.smsTimer) {
                this.sendText = TIME_COUNT
                this.smsTimer = setInterval(() => {
                    if (this.sendText > 0 && this.sendText <= TIME_COUNT) {
                        this.sendText--
                    } else {
                        this.isSending = false
                        this.sendText = '获取'
                        clearInterval(this.smsTimer)
                        this.smsTimer = null
                    }
                }, 1000)
            }
        },
	}
}
</script>
<style lang="scss" scoped>
.give-cash-bonus {
    .lowerLevel-content-title-left {
        width: 5.4rem;
        margin: 0 auto;
        .lowerLevel-content-title-list {
            width: 50%;
            color: rgb(114,114,114);
            height: .78rem;
            border-bottom: rgba(0, 71, 157,0) 2px solid;
        }
        .title-chosing {
            font-weight: bold;
            color: rgb(0, 71, 157);
            border-bottom: rgb(0, 71, 157) 2px solid;
        }
    }
    .gray-line {
        height: 1px;
        background: rgb(160,160,160);
    }
    .give-cash-content {
        .balance-box {
            padding: 0 .2rem;
            margin-top: .24rem;
            .balance-list {
                span {
                    color: rgb(0, 71, 157);
                }
            }
        }
        .give-cash-line {
            padding: 0 .2rem;
            height: 0.58rem;
            margin-top: .4rem;
            .line-left-fonts {
                width: 1.5rem;
                font-size: .25rem;
            }
            .line-right-input {
                width: calc(100% - 1.4rem);
                height: 100%;
                border: #D1D1D1 1px solid;
                border-radius: .08rem;
                padding: 0 .2rem;
                position: relative;
                span {
                    font-size: .25rem;
                }
                .check-acc-input {
                    width: 80%;
                    border: none;
                    outline: none;
                    font-size: .24rem;
                }
                .check-acc-btn {
                    width: 1rem;
                    // height: calc(100% - .1rem);
                    background: #0C408D;
                    color: #FFFFFF;
                    font-size: .2rem;
                    border-radius: .06rem;
                    margin-right: -.14rem;
                    padding: .06rem 0;
                }
                .vant-input-list {
                    height: 100%;
                    padding: 0;
                    font-size: .24rem;
                    padding-top: .06rem;
                    width: 76%;
                }
                .cash-input-error  {
                    position: absolute;
                    right: .1rem;
                    top: 50%;
                    transform: translateY(-50%);
                    font-size: .2rem;
                    color: #C72823;
                }
                .member-check-error {
                    position: absolute;
                    left: 0;
                    bottom: -.34rem;
                    font-size: .2rem;
                    color: #C72823;
                    transform: scale(.9);
                }
            }
            .right-radio {
                width: calc(100% - 1.4rem);
                height: 100%;
                overflow: hidden;
                .mint-radiolist {
                    display: flex;
                    margin-left: -.6rem;
                }
            }
        }
        .added-acc-list-box {
            flex-wrap: wrap;
            padding: 0 .2rem;
            margin-top: .14rem;
            .added-acc-list {
                height: 0.48rem;
                padding: 0 .14rem;
                border: #D1D1D1 1px solid;
                border-radius: .06rem;
            }
            .added-acc-list {
                margin: 0 .1rem .1rem 0;
                .delete-acc {
                    margin-left: .2rem;
                }
            }
        }
        .vcode-line {
            margin-top: .4rem;
        }
        .sub-give-cash {
            width: 80%;
            margin: .6rem auto 0;
            border-radius: .15rem;
        }
        .data-list-box {
            margin-top: .2rem;
            padding: 0 .2rem;
            .collapse-content-list {
                margin-top: .1rem;
                .collapse-content-list-title {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background: rgb(229, 229, 229);
                    height: .8rem;
                    padding: 0 .2rem;
                    color: rgb(65, 65, 65);
                    .collapse-content-list-title-right {
                        height: .25rem;
                    }
                    .collapse-content-list-title-right2 {
                        transform: rotate(180deg);
                    }
                    div {
                        display: flex;
                        align-items: center;
                        .right-fonts {
                            margin-right: .15rem;
                        }
                        .collapse-content-list-title-right {
                            height: .25rem;
                        }
                        .collapse-content-list-title-right2 {
                            transform: rotate(180deg);
                        }
                    }

                }
                .collapse-content-list-table {
                    padding: .1rem .2rem .2rem;
                    .collapse-content-list-table-list {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        text-align: center;
                        border-bottom: rgb(229, 229, 229) 1px solid;
                        padding: .15rem 0;
                        div {
                            width: 33.3%;
                            .line1 {
                                width: 100%;
                                color: rgb(102, 102, 102);
                            }
                            .line2 {
                                margin-top: .1rem;
                                width: 100%;
                                color: rgb(52, 52, 52);
                                padding: 0 .1rem;
                            }
                        }
                        .w50 {
                            width: 50%;
                        }
                        .gray-line {
                            height: .5rem;
                            width: 1px;
                            background: rgb(229, 229, 229);
                        }
                    }
                }
            }
            .load-more {
                display: flex;
                justify-content: center;
                align-items: center;
                color: #9C9C9C;
                margin-top: .15rem;
                margin-bottom: .6rem;
                .load-more-icon {
                    height: .15rem;
                    margin-left: .15rem;
                }
            }
            .no-data-box {
                text-align: center;
                margin-top: 1rem;
                .no-data-img {
                    width: 3rem;
                }
                .no-data-fonts{
                    color: rgb(176,182,190);
                    font-size: .4rem;
                    margin-top: .2rem;
                }
            }
        }
    }
}
.search-title {
    height: 0.64rem;
    width: calc(100% - .4rem);
    margin: 0 auto .2rem;
    border-bottom: #D1D1D1 1px solid;
    color: #0C408D;
    font-size: .28rem;
}
.give-cash-line {
    padding: 0 .2rem;
    height: 0.58rem;
    margin-top: .14rem;
    .line-left-fonts {
        width: 1.5rem;
        font-size: .25rem;
    }
    .line-right-input {
        width: calc(100% - 1.4rem);
        height: 100%;
        border: #D1D1D1 1px solid;
        border-radius: .08rem;
        padding: 0 .2rem;
        position: relative;
        span {
            font-size: .25rem;
        }
        .check-acc-input {
            width: 80%;
            border: none;
            outline: none;
            font-size: .24rem;
        }
    }
    .right-checkbox {
        width: calc(100% - 1.4rem);
        .right-checkbox-list {
            height: .44rem;
            border: #D1D1D1 1px solid;
            width: 1rem;
            border-radius: .08rem;
            font-size: .24rem;
            margin-right: .2rem;
        }
        .right-checkbox-list-activing {
            border: #0C408D 1px solid;
            color: #0C408D;
        }
    }
}
.sub-search-btn-box {
    width: 90%;
    margin: .26rem auto;
    .sub-search-btn {
        height: 0.6rem;
        width: 1.96rem;
    }
    .sub-search-btn:last-child {
        margin-left: .2rem;
    }
}
</style>
